﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="a.aspx.cs" Inherits="Learn.NewFolder1_and_SavingData.a" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.8.2.min.js"></script>
    <script src="../Scripts/sammy.js"></script>
    <script src="../Scripts/knockout-3.3.0.js"></script>
</head>
<body>
    <h3>Tasks</h3>
    <%--<form action="a.aspx?cmd=save" method="post">
        <input type="hidden" name="tasks" data-bind="value: ko.toJSON(tasks)" />
        <button type="submit">Save</button>
    </form>--%>
    <form data-bind="submit: addTask">
        Add task:<input data-bind="value: newTaskText" placeholder="What needs to be done?" />
        <button type="submit" >Add</button>
    </form>

    <ul data-bind="foreach: tasks, visible: tasks().length">
        <li>
            <input type="checkbox" data-bind="checked: isDone" />
            <input data-bind="value: title, disable: isDone" />
            <a href="#" data-bind="click: $parent.removeTask">Delete</a>
        </li>
    </ul>
    You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
    <span data-bind="visible: incompleteTasks().length == 0">- it's beer time!</span>
    <button data-bind="click:save">Save</button>
    <script>
        function Task(data) {
            this.title = ko.observable(data.title);
            this.isDone = ko.observable(data.isDone);
        }
        function TaskListViewModel() {
            //data
            var self = this;
            self.tasks = ko.observableArray([]);
            self.newTaskText = ko.observable();
            self.incompleteTasks = ko.computed(function () {
                return ko.utils.arrayFilter(self.tasks(), function (task) {
                    return (!task.isDone() && !task._destroy)
                });
            });
            //Opeations
            self.addTask = function () {
                self.tasks.push(new Task({ title: this.newTaskText() }));
                self.newTaskText('');
            };
            self.removeTask = function (task) {
                //self.tasks.remove(task);
                self.tasks.destroy(task);
            };
            //Load initial state from server,
            //convert it to Task instances,then populate self.tasks
            $.getJSON("a.aspx?cmd=getTaskLs", function (allData) {
                var mappedTasks = $.map(allData, function (item) {
                    return new Task(item);
                });
                self.tasks(mappedTasks);
            });
            self.save = function () {
                $.post('a.aspx?cmd=save', "data=" + ko.toJSON(self.tasks));
                //$.ajax('a.aspx?cmd=save',
                //    {
                //        data:'aa=f',// ko.toJSON({ tasks: self.tasks() }),
                //        type: 'post', contentType: 'application/json',
                //        success: function (resutl) {
                //            alert('success');
                //        }
                //    });
            }
        }
        ko.applyBindings(new TaskListViewModel());
    </script>
</body>
</html>
